import { ElLoading } from "element-plus";

class Loading {
  // 当前实例
  loadingIns;

  /**
   * 内部：解析容器
   * @param {String|Element} container
   * @returns {Element|null}
   */
  #resolveContainer = container => {
    if (!container) return null;
    if (typeof container === "string") return document.querySelector(container);
    if (container instanceof Element) return container;
    return null;
  };

  /**
   * 默认 Loading 加载提示
   * @param {String} text 加载文字
   * @param {Object} options 配置项
   * @returns {Object} 返回一个 Loading 实例
   */
  baseLoading = (text = "加载中…", options = {}) => {
    // 获取容器
    if (options?.container) options.container = this.#resolveContainer(options?.container);
    // 设置自定义 class
    let customClass = "toast-loading";
    // 若容器存在且样式为 static，则改为 relative（避免 loading 定位错误）
    if (options?.container && getComputedStyle(options.container).position === "static") {
      options.container.style.position = "relative";
    }
    // 若容器存在且为 Element，说明局部容器
    if (options.container instanceof Element) customClass += " toast-loading--dark";
    // 这里也用 _loading 保持“直接关闭”的体验（只维护一个）
    if (this.loadingIns) this.loadingIns?.close();
    // 开始 loading
    this.loadingIns = ElLoading.service({
      target: options?.container || document.body,
      text,
      background: "transparent",
      customClass,
      ...options,
    });
    return this.loadingIns;
  };
}

/**
 * 作为插件全局挂载
 * @param {Object} app Vue 应用实例
 * @returns {void}
 */
export default {
  install(app) {
    // 创建 loading 实例
    const loadingInstance = new Loading();
    // 创建一个可调用的函数，默认调用 baseLoading 方法
    const $loading = (text, options) => loadingInstance.baseLoading(text, options);
    // 挂载到 Vue 实例
    app.config.globalProperties.$loading = $loading;
    // 可选：挂到 window 方便在非组件场景快速用
    if (typeof window !== "undefined") {
      window.$loading = $loading;
    }
  },
};
